<script setup lang="ts">
  import { ref, defineEmits, computed, watch, onMounted, PropType } from 'vue';
  import { useBooleanStore } from '@/store';
  import { getStocktakingPage } from '@/api/stocktaking';
  import { LocationTypeOption } from '@/api/les/types';

  const props = defineProps({
    stocktakingTypeOptions: Array as PropType<LocationTypeOption[]>,
    statusOptions: Array as PropType<LocationTypeOption[]>,
  });
  const emit = defineEmits(['updateArray']);
  const booleanStore = useBooleanStore();
  // 表单查询数据
  const type = ref<string>('');
  const status = ref<string>('');
  const isLarge = ref<string>('');
  const planDate = ref([]);
  const finishedDate = ref([]);

  const pageSize = ref<number>(10);
  const pageNumber = ref<number>(1);

  async function handleSearch() {
    const newData = await getStocktakingPage({
      type: type.value,
      status: status.value,
      isLarge: isLarge.value,
      planDate: planDate.value,
      finishedDate: finishedDate.value,
      size: pageSize.value,
      current: pageNumber.value,
    });
    emit('updateArray', newData);
  }
  // 重置
  function reset() {
    type.value = '';
    status.value = '';
    isLarge.value = '';
    planDate.value = [];
    finishedDate.value = [];
    handleSearch();
  }
  onMounted(() => {
    handleSearch();
  });
  // 监听分页
  watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
    if (booleanStore.num5 === 115) {
      pageNumber.value = booleanStore.pageNum;
      pageSize.value = booleanStore.pageSize;
      handleSearch();
    }
  });
  watch(
    () => booleanStore.update,
    () => {
      if (booleanStore.num6 === 115) handleSearch();
    }
  );
</script>

<template>
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <a-select
        v-model="type"
        placeholder="盘点类型"
        size="large"
        @press-enter="handleSearch"
      >
        <a-option
          v-for="item of props.stocktakingTypeOptions"
          :key="item.value"
          :value="item.value"
          >{{ item.label }}
        </a-option>
      </a-select>
    </a-col>
    <a-col :span="6">
      <a-select
        v-model="status"
        placeholder="盘点状态"
        size="large"
        @press-enter="handleSearch"
      >
        <a-option
          v-for="item of props.statusOptions"
          :key="item.value"
          :value="item.value"
          >{{ item.label }}
        </a-option>
      </a-select>
    </a-col>
    <a-col :span="6">
      <a-range-picker
        width="100%"
        v-model:model-value="planDate"
        size="large"
        :placeholder="['计划开始日期', '计划完成日期']"
      />
    </a-col>
    <a-col :span="6">
      <a-range-picker
        width="100%"
        v-model:model-value="finishedDate"
        size="large"
        :placeholder="['要求开始日期', '要求完成日期']"
      />
    </a-col>
  </a-row>
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6" style="margin-top: 10px">
      <a-select
        v-model="isLarge"
        size="large"
        placeholder="是否大件"
        @press-enter="handleSearch"
      >
        <a-option value="1">是</a-option>
        <a-option value="0">否</a-option>
      </a-select>
    </a-col>
    <a-col :span="12" style="margin-top: 10px">
      <a-button type="primary" size="large" @click="handleSearch"
        >查询</a-button
      >
      <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
      <a-button class="btn-reset" size="large">导出</a-button>
      <a-button
        type="primary"
        class="btn-reset"
        size="large"
        @click="booleanStore.toggleBool(116)"
        >新增</a-button
      >
    </a-col>
  </a-row>
</template>

<style scoped>
  .btn-group {
    float: right;
    margin-top: 15px;
  }

  .btn-reset {
    margin-left: 10px;
  }
</style>
